<template>
	<view class="nav-per">
		<block v-for="(item,index) in lists" :key="index">
			<view class="per-list" :class="{'background':isbackground}">
				<view class="square">{{index+1}}</view>
				<view class="personal">
					<view class="personal-name">
						<image class="user-img" src="../../static/images/authoriztion/ren.png" mode="widthFix"></image>
						<view class="name">{{item.userName}}</view>
					</view>
					<view class="personal-mobile">
						<image class="mobile-img" src="../../static/images/authoriztion/dianhua.png" mode=""></image>
						<view class="mobile">{{item.phonenumber}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default{
		props: {
			lists: {
				type: Array,
				default:() =>{
					return []
				}
			},
			curre: {
				default: null
			},
			isbackground:{
				type: Boolean,
				default: false
			}
		},

		methods:{
			
		} 
	}
</script>

<style scoped lang="less">
.background{
	background: #FFFFFF !important;
}
.nav-per{
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-content:flex-start;
	.per-list{
		// width: 365rpx;
		// height: 97rpx;
		width: 12.639vw;
		height: 6.275vh;
		border: 2rpx solid #B9D7FF; 
		box-sizing: border-box;
		margin:0rpx 22rpx 14rpx 0rpx;
		border-radius: 20rpx;
		padding: 16rpx;
		display: flex;
		align-items: center;
		&:nth-child(7n){
			margin-right: 0;
		}
		.square{
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 65rpx;
			// height: 70rpx;
			width: 2.223vw;
			height: 4.576vh;
			background: #89BCFF;
			font-size: 34rpx;
			color: #FFFFFF;
			margin-right: 25rpx;
			border-radius: 15rpx;
		}
		.personal{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.personal-name{
				display: flex;
				align-items: center;
				.user-img{
					// width: 24rpx;
					// height: 25rpx !important;
					width: 0.834vw;
					height: 1.57vh !important;
					margin-right: 15rpx;
				}
				.name{
					color: #515151;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
			.personal-mobile{
				display: flex;
				align-items: center;
				.mobile-img{
					// width: 24rpx;
					// height: 25rpx;
					width: 0.834vw;
					height: 1.57vh !important;
					margin-right: 15rpx;
				}
				.mobile{
					color: #515151;
					font-size: 27rpx;
					font-weight: 400;
				}
			}
		}	
	}
}
</style>
